<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<!-- html不区分大小写 -->
	<!-- 
	 :   => v-bind:
	 @	 => v-on:
	 #   => v-slot:
	 -->
	<div id="app">
		<h1>{{ msg }}</h1>
		<!-- <my-counter title="app counter"></my-counter> -->
		<my-counter my-title="app 计数器"></my-counter>
	</div>
	<hr>
	<div id="app1">
		<h1>{{ msg }}</h1>
		<my-counter111>
			Hello
			<!-- <template #after> -->
			<template v-slot:after>
				<i>template # 插槽值</i>
			</template>
		</my-counter111>
		<my-counter111 my-title="title">
			<span style="color: red">Slot</span>
			<b slot="after">具名插槽</b>
		</my-counter111>
	</div>
	
	<script src="vue.js"></script>
	<script>
		
		// 全局组件
		/*Vue.component("my-counter", {
			template: `<button @click="count++">counter: {{ count }}</button>`,
			data: () => ({ count: 1 })
		})*/
		const myCounter = {
			template: `
				<div>
					<slot></slot>
					<button @click="counterAdd">{{ myTitle }}: {{ count }}</button>
					<slot name="after"></slot>
				</div>
			`,
			props: {
				// title: String,
				// myTitle: String,
				myTitle: {
					type: String,
					default: "默认的Title"
					// required: true
				},
			},
			data() {
				return { 
					count: 1,
					mTitle: this.myTitle
				}
			},
			methods: {
				counterAdd() {
					this.count++
					console.log(this.myTitle)
					console.log(this.mTitle)
					// this.myTitle = "title被修改"
					this.mTitle = "title被修改"
					console.log(this.myTitle)
					console.log(this.mTitle)
					// this.$emit()
				}
			},
		}
		
		const app = new Vue({
			data: {
				msg: "Hello Vue: app！"
			},
			// 组件局部注册
			components: {
				"my-counter": myCounter
			}
		}).$mount("#app")
		
		const app1 = new Vue({
			data: {
				msg: "Hello Vue: app1 ！"
			},
			components: {
				"my-counter111": myCounter
			}
		}).$mount("#app1")
	</script>
</body>
</html>